<template>
	<view class="stepsBox">
		<view class="stepsBox_index">
			<view v-for="(ele,ind) in option" :key="ind" class="stepsBoxIndex"
				:style="'height:calc(100% / '+option.length+')'">
				<view class="stepsIndBox"
					:style="{backgroundImage:ele.status!==0?'url(/static/images/choseStepIcon.png)':'url(/static/images/choseStepIconNon.png)',backgroundSize:'100% 100%',}">
				</view>
				<view class="stepsIndBorderBox" v-if="ind!==option.length-1"
					:style="{background:ele.status!==0?activeColor:deactiveColor}"
					:class="{'activeBor':ind>(active-1)}">
				</view>
			</view>
		</view>
		<view class="stepsBox_Cont">
			<view v-for="(ele,ind) in option" :key="ind" class="stepsBoxIndex"
				:style="'height:calc(100% / '+option.length+')'">
				<view
					:style="{color:ele.status!==0?activeColor:'#666',fontSize:ele.status!==0?'30rpx':'28rpx',fontWeight:ind<=ele.status!==0?'500':'400'}">
					{{ele.title}}
				</view>
				<view class="stepsStatusBox" :style="{color:ele.status!==0?activeColor:'#666'}" v-if="ele.statusName">
					(
					{{ele.statusName}}
					)
				</view>
				<view class="stepsBox_ContButton" v-if="ind<=(active-1)">
					<view class="stepsButtonBox" v-if="ind==0 && ele.status==0">
						<view @click="choseStepsButton('创建通联会员')">
							去创建
						</view>
					</view>
					<view class="stepsButtonBox" v-if="ind==1 && ele.status==0">
						<view @click="choseStepsButton('实名认证')">
							去实名
						</view>
					</view>
					<view class="stepsButtonBox" v-if="ind==2 && ele.status==0">
						<view @click="choseStepsButton('绑定手机号')">
							去绑定
						</view>
					</view>
					<view class="stepsButtonBox" v-if="ind==2 && ele.status==1">
						<view @click="choseStepsButton('解绑手机号')">
							去解绑
						</view>
					</view>
					<view class="stepsButtonBox" v-if="ind==3 && ele.status==0">
						<view @click="choseStepsButton('绑定银行卡')">
							去绑定
						</view>
					</view>
					<view class="stepsButtonBox" v-if="ind==3 && ele.status==1">
						<view @click="choseStepsButton('解绑银行卡')">
							去解绑
						</view>
					</view>
					<view class="stepsButtonBox"
						v-if="ind==4 && ele.status==1">
						<view @click="choseStepsButton('申请充值')">
							去充值
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMemberInfo
	} from '@/api/directSelling.js';
	import {
		shop_ht,
		zhixiao_IFramURl
	} from '@/config/app_member.js';
	/**
	 * Steps 步骤条
	 * @description 评分组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
	 * @property {Number} active 当前步骤
	 * @property {String} direction = [row|column] 当前步骤
	 * 	@value row 横向
	 * 	@value column 纵向
	 * @property {String} activeColor 选中状态的颜色
	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
	 */
	export default {
		name: 'stepsBox',
		props: {
			activeColor: {
				// 激活状态颜色
				type: String,
				default: '#1aad19'
			},
			deactiveColor: {
				// 未激活状态颜色
				type: String,
				default: '#999999'
			},
			active: {
				// 当前步骤
				type: Number,
				default: 0
			},
			option: {
				type: Array,
				default () {
					return []
				}
			},
			sevice_id: {
				// 激活状态颜色
				type: String,
			},
			token: {
				// 激活状态颜色
				type: String,
			}
		},
		data() {
			return {
				userInfo: {}
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			choseStepsButton(name) {
				if (name == '创建通联会员') {
					let createMmeberData = {
						token: this.$w_md5.hex_md5_32Upper('tlCreateMember' + this.userInfo.memberCode),
						memberCode: this.userInfo.memberCode,
						memberType: 3
					}
					uni.request({
						url: shop_ht + '/shop_ht/vt/tlCreateMember.do',
						method: "get",
						data: createMmeberData,
						success: (res) => {
							if (res.data.status == 1) {
								this.$util.Tips({
									title: '会员创建成功！'
								});
								this.$emit('SignContract');
							} else {
								this.$util.Tips({
									title: '会员创建失败！'
								});
								this.$emit('SignContract');
							}
						}
					})
				} else if (name == '实名认证') {
					if (this.option[0].status == 0) {
						this.$util.Tips({
							title: '请先创建通联会员！'
						})
					}else{
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/electronicWallet/bankCardDo/personalAuthentication"
							});
						}, 1000)
					}
				} else if (name == '绑定手机号') {
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/electronicWallet/bankCardDo/bindMobilePhoneNumber"
						});
					}, 1000)
				}else if (name == '解绑手机号') {
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/electronicWallet/bankCardDo/unbindMobilePhoneNumber"
						});
					}, 1000)
				} else if (name == '绑定银行卡') {
					if (this.option[1].status == 0) {
						this.$util.Tips({
							title: '请先进行实名认证！'
						})
					} else {
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/electronicWallet/bankCardDo/requestBindbankcard"
							});
						}, 1000)
					}
				}else if(name == '解绑银行卡'){
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/electronicWallet/bankCardDo/alreadybindbankcard"
						});
					}, 1000)
				} else if (name == '申请充值') {
					setTimeout(() => {
						let path =zhixiao_IFramURl+"/personal/requestRecharge";
						uni.navigateTo({
							url: "/pages/electronicWallet/recharge/applicationRecharge"
							//url: "/pages/user/memberCenterJumb?path=" + path+"&title=银行卡充值"
						});
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stepsBox {
		width: 100%;
		height: 100%;
		font-weight: 400;

		.stepsBox_index {
			width: 50rpx;
			height: 100%;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			box-sizing: border-box;

			.stepsBoxIndex {
				height: calc(100% / 6);
				position: relative;
				padding-top: 10rpx;
				box-sizing: border-box;

				.stepsIndBox {
					width: 34rpx;
					height: 34rpx;
					position: absolute;
					left: 50%;
					right: 50%;
					transform: translateX(-50%);
					background-size: 100% 100%;
				}

				.stepsIndBorderBox {
					width: 2rpx;
					height: calc(100% - 24rpx - 20rpx);
					top: 47rpx;
					background: #CCCCCC;
					position: absolute;
					left: 50%;
					right: 50%;
					transform: translateX(-50%);
				}

				.stepsIndBorderBox.activeBor {
					height: calc(100% - 20rpx - 20rpx);
					top: 43rpx;
				}
			}
		}

		.stepsBox_Cont {
			height: 100%;
			width: calc(100% - 50rpx);
			display: inline-block;
			vertical-align: top;
			padding-left: 10rpx;
			box-sizing: border-box;

			.stepsBoxIndex {
				height: calc(100% / 6);
				position: relative;
				color: #000000;
				font-size: 28rpx;

				.stepsStatusBox {
					color: #666666;
					font-size: 24rpx;
					line-height: 40rpx;
				}

				.stepsBox_ContButton {
					position: absolute;
					// right:130rpx;	
					right: 0rpx;
					width: 150rpx;
					height: auto;
					top: 10rpx;
				}

				.stepsStatus {
					color: #333333;
					font-size: 24rpx;
					line-height: 56rpx;
					padding-left: 10rpx;
				}

				.stepsBox_ContButton>view.stepsButtonBox {
					width: 150rpx;
					height: 60rpx;
					background: #8273F5;
					border-radius: 30rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 60rpx;
					text-align: center;
				}

				.stepsBox_ContButton>view.stepsButtonBox:not(:last-child) {
					margin-bottom: 16rpx;
				}
			}
		}
	}

	.noPassBox {
		position: absolute;
		left: 68px;
		width: calc(100% - 68px);
		height: auto;
		top: 20px;
		color: #333333;
		font-size: 12px;
		line-height: 28px;
		padding-left: 5px;

		>view {
			display: inline-block;
			vertical-align: top;
		}

		>view:nth-child(1) {
			width: 150rpx;
		}

		>view:nth-child(2) {
			width: calc(100% - 150rpx);
		}
	}
</style>
